<template>
  <view class="trust-card-composite" :class="cardClasses">
    <!-- 信任状态层 -->
    <TrustStatusLayer 
      :trustValue="trustValue"
      :showAura="showAura"
    />
    
    <!-- 信任描述层 -->
    <TrustDescriptionLayer 
      :cardData="cardData"
      :trustValue="trustValue"
      :trustHistory="trustHistory"
      :showHistory="showHistory"
    />
    
    <!-- 信任交互层 -->
    <TrustInteractionLayer 
      :cardData="cardData"
      :trustValue="trustValue"
      :showQuickActions="showQuickActions"
      :showTips="showTips"
      @trust-action="handleTrustAction"
      @show-trust-suggestions="showTrustSuggestions"
    />
    
    <!-- 信任效果层 -->
    <view class="trust-effects-layer" v-if="showEffects">
      <view class="effects-overlay">
        <view 
          class="effect-particle" 
          v-for="effect in activeEffects" 
          :key="effect.id"
          :style="getEffectStyle(effect)"
        >
          <text class="effect-icon">{{ effect.icon }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import TrustStatusLayer from './TrustStatusLayer.vue'
import TrustDescriptionLayer from './TrustDescriptionLayer.vue'
import TrustInteractionLayer from './TrustInteractionLayer.vue'

export default {
  name: 'TrustCardComposite',
  components: {
    TrustStatusLayer,
    TrustDescriptionLayer,
    TrustInteractionLayer
  },
  
  props: {
    cardData: {
      type: Object,
      required: true
    },
    trustValue: {
      type: Number,
      default: 50
    },
    trustHistory: {
      type: Array,
      default: () => []
    },
    showAura: {
      type: Boolean,
      default: true
    },
    showHistory: {
      type: Boolean,
      default: true
    },
    showQuickActions: {
      type: Boolean,
      default: true
    },
    showTips: {
      type: Boolean,
      default: true
    },
    showEffects: {
      type: Boolean,
      default: true
    }
  },
  
  computed: {
    cardClasses() {
      const level = this.getTrustLevel(this.trustValue)
      return [
        'trust-card-composite',
        `trust-${level}`,
        `card-${this.cardData.type}`,
        `rarity-${this.cardData.rarity}`
      ]
    },
    
    activeEffects() {
      const effects = []
      
      if (this.trustValue >= 90) {
        effects.push({
          id: 'divine_glow',
          icon: '✨',
          intensity: 1.0
        })
      }
      
      if (this.trustValue >= 80) {
        effects.push({
          id: 'perfect_aura',
          icon: '💎',
          intensity: 0.8
        })
      }
      
      if (this.trustValue >= 60) {
        effects.push({
          id: 'cooperation_glow',
          icon: '🤝',
          intensity: 0.6
        })
      }
      
      if (this.trustValue <= 20) {
        effects.push({
          id: 'suspicion_shadow',
          icon: '⚠️',
          intensity: 0.7
        })
      }
      
      if (this.trustValue <= 10) {
        effects.push({
          id: 'broken_crack',
          icon: '💔',
          intensity: 1.0
        })
      }
      
      return effects
    }
  },
  
  methods: {
    getTrustLevel(trustValue) {
      if (trustValue >= 80) return 'high'
      if (trustValue >= 50) return 'medium'
      if (trustValue >= 20) return 'low'
      return 'broken'
    },
    
    getEffectStyle(effect) {
      const angle = Math.random() * 360
      const distance = 50 + Math.random() * 100
      const x = Math.cos(angle * Math.PI / 180) * distance
      const y = Math.sin(angle * Math.PI / 180) * distance
      
      return {
        transform: `translate(${x}rpx, ${y}rpx)`,
        opacity: effect.intensity,
        animationDelay: `${Math.random() * 2}s`,
        animationDuration: `${2 + Math.random() * 2}s`
      }
    },
    
    handleTrustAction(actionData) {
      this.$emit('trust-action', {
        ...actionData,
        cardId: this.cardData.id,
        currentTrustValue: this.trustValue
      })
    },
    
    showTrustSuggestions(suggestionData) {
      this.$emit('show-trust-suggestions', {
        ...suggestionData,
        cardId: this.cardData.id
      })
    }
  }
}
</script>

<style scoped>
.trust-card-composite {
  position: relative;
  background: white;
  border-radius: 20rpx;
  margin: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 信任状态样式 */
.trust-card-composite.trust-high {
  border: 3rpx solid #4caf50;
  background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
  box-shadow: 0 8rpx 32rpx rgba(76, 175, 80, 0.2);
}

.trust-card-composite.trust-medium {
  border: 3rpx solid #ff9800;
  background: linear-gradient(135deg, #fff8f0 0%, #ffe6cc 100%);
  box-shadow: 0 8rpx 32rpx rgba(255, 152, 0, 0.2);
}

.trust-card-composite.trust-low {
  border: 3rpx solid #ff5722;
  background: linear-gradient(135deg, #fff5f5 0%, #ffe6e6 100%);
  box-shadow: 0 8rpx 32rpx rgba(255, 87, 34, 0.2);
}

.trust-card-composite.trust-broken {
  border: 3rpx solid #f44336;
  background: linear-gradient(135deg, #fafafa 0%, #e0e0e0 100%);
  box-shadow: 0 8rpx 32rpx rgba(244, 67, 54, 0.2);
  filter: grayscale(0.3);
}

/* 稀有度样式 */
.trust-card-composite.rarity-common {
  border-left: 6rpx solid #e0e0e0;
}

.trust-card-composite.rarity-rare {
  border-left: 6rpx solid #4caf50;
}

.trust-card-composite.rarity-epic {
  border-left: 6rpx solid #9c27b0;
}

.trust-card-composite.rarity-legendary {
  border-left: 6rpx solid #ff9800;
  box-shadow: 0 0 20rpx rgba(255, 152, 0, 0.3);
}

/* 信任效果层 */
.trust-effects-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.effects-overlay {
  position: relative;
  width: 100%;
  height: 100%;
}

.effect-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20rpx;
  height: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: particleFloat 3s infinite;
}

.effect-icon {
  font-size: 16rpx;
  opacity: 0.8;
}

/* 动画效果 */
@keyframes particleFloat {
  0%, 100% {
    opacity: 0;
    transform: scale(0) translate(0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1) translate(0, -20rpx);
  }
}

/* 悬停效果 */
.trust-card-composite:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
}

.trust-card-composite.trust-high:hover {
  box-shadow: 0 12rpx 40rpx rgba(76, 175, 80, 0.3);
}

.trust-card-composite.trust-medium:hover {
  box-shadow: 0 12rpx 40rpx rgba(255, 152, 0, 0.3);
}

.trust-card-composite.trust-low:hover {
  box-shadow: 0 12rpx 40rpx rgba(255, 87, 34, 0.3);
}

.trust-card-composite.trust-broken:hover {
  box-shadow: 0 12rpx 40rpx rgba(244, 67, 54, 0.3);
}

/* 响应式设计 */
@media (max-width: 768rpx) {
  .trust-card-composite {
    margin: 12rpx;
  }
  
  .effect-particle {
    width: 16rpx;
    height: 16rpx;
  }
  
  .effect-icon {
    font-size: 14rpx;
  }
}
</style>

